<template>
<div>
    <div><img src="../assets/logo.png" style="display:block;width:100px;height:100px;" /></div>
    <div>
      <span class='loginText'>注册</span>
    </div>
    <div class="login">
      <div>
        <div class='inputContainer'>
          <div class='labelContainer'><span class="label">手机号:</span></div>
        <el-input class='input' v-model='phone' placeholder='请输入手机号'></el-input>
        </div>
        <div class='inputContainer'>
          <div class='labelContainer'><span class="label">验证码:</span></div>
        <el-input class='input' style="width:100px;float:left" v-model='verifyCode' placeholder='请输入手机号'>
        </el-input>
        <img src="../assets/logo.png" alt="" style="width:50px;height:30px;margin-top:10px;"/>
        <span @click="changeVerifyCode">看不清？换一张</span>
        </div>
        <div class='inputContainer'>
          <div class='labelContainer'><span class="label">短信验证码:</span></div>
        <el-input class='input' style="width:100px;float:left" v-model='smsCode' placeholder='请输入手机号'>
        </el-input>
        <el-button style='' type="primary" @click='login'>登录</el-button>
        </div>
        <div class='inputContainer'>
           <div class='labelContainer'><span class="label">登录密码:</span></div>
        <el-input class='input' v-model='password' placeholder='请输入密码' type='password'>
        </el-input>
        </div>
        <div class="loginType">
          <el-checkbox v-model="checked"></el-checkbox>
          <span @click="toAgreement">协议</span>
          </div>
          <div style='margin-top:10px'><el-button class='loginButton' type="primary" @click='regist'>登录</el-button></div>
      </div>
    </div>
  </div>
</template>
<style>
.loginText {
  margin-left: 100px;
  margin-top: 100px;
  display: block;
  font-size: 50px;
  top: 100px;
  font-color: '#000000';
}

.login {
  width: 400px;
  height: 350px;
  margin: auto;
  margin-top: 100px;
}

.loginButton {
  margin: auto;
  display: block;
  width: 300px;
  margin-top: 10px;
}
.input {
  width:300px;
  height: 40px;
  float: left;
  margin-left: 10px
}
.inputContainer {
  height:40px;
  position: relative;
  margin-top: 10px
}
.labelContainer {
float:left;
width: 85px;
text-align:right;
margin-top: 10px;
}
.label {
  font-size: 16px;
}
.inputContainer::after{
content: '';
display: block;
clear: both;
}
.loginType {
text-align: center;
margin-top: 10px;
}
.loginType::after{
content: '';
display: block;
clear: both;
}
</style>
<script>
export default {
  data: function () {
    return {
      checked: true,
      phone: '',
      smsCode: '',
      password: '',
      verifyCode: ''
    }
  },
  method: {
    changeVerifyCode: function () {
    },
    regist: function () {
    },
    toAgreement: function () {
    }
  }
}
</script>
